Angular Material এর MatTree কম্পোনেন্ট হায়ারার্কিক্যাল ডেটা বা ট্রি-স্ট্রাকচারযুক্ত ডেটা প্রদর্শন করতে ব্যবহৃত হয়। এটি একটি গাছের মতো স্ট্রাকচার তৈরি করে, যেখানে প্রতিটি নোড এক্সপ্যান্ডেবল বা কলাপ্সযোগ্য হতে পারে এবং উপরের স্তর থেকে নিচে ডেটা দেখতে এবং ম্যানেজ করতে সহায়তা করে। Material Tree সাধারণত ফাইল সিস্টেম, মেনু, বা ন্যাভিগেশন ডেটা দেখানোর জন্য ব্যবহৃত হয়, যেখানে ডেটার একাধিক স্তর থাকে।

Angular Material এর MatTree কম্পোনেন্টটি অত্যন্ত কাস্টমাইজেবল এবং এতে অনেক উন্নত ফিচার যেমন ড্র্যাগ-এন্ড-ড্রপ, ইন্টারঅ্যাকটিভ এক্সপ্যান্ডেবল নোডস, এবং টেমপ্লেট কাস্টমাইজেশন রয়েছে।

MatTree এর বৈশিষ্ট্য

• এলার্কিক্যাল ডেটা: ডেটা একটি গাছের মতো স্তরে সাজানো থাকে।
• এক্সপ্যান্ডেবল এবং কলাপ্সযোগ্য নোড: প্রতিটি নোড এক্সপ্যান্ড বা কলাপ্স করা যেতে পারে।
• ড্র্যাগ-এন্ড-ড্রপ সাপোর্ট: নোডগুলোকে ড্র্যাগ এবং ড্রপ করা যেতে পারে।
• কাস্টম আইকন সাপোর্ট: প্রতিটি নোডের জন্য আইকন ব্যবহার করা যায়।
• লেজি লোডিং: বড় ডেটাসেটের জন্য লেজি লোডিং সুবিধা।

Material Tree তৈরি করার জন্য পদক্ষেপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatTreeModule, MatIconModule, এবং MatButtonModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatTreeModule } from '@angular/material/tree';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    MatTreeModule,
    MatIconModule,
    MatButtonModule
  ]
})
export class AppModule {}

২. HTML টেমপ্লেটে ট্রি কম্পোনেন্ট ব্যবহার করা

Angular Material এর MatTree কম্পোনেন্টে ডেটা প্রদর্শন করতে নিচে একটি উদাহরণ দেওয়া হলো:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li>
      <button mat-icon-button disabled>
        <mat-icon *ngIf="node.children?.length">{{node.expandable ? 'expand_more' : 'chevron_right'}}</mat-icon>
      </button>
      {{node.name}}
    </li>
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
    <li>
      <button mat-icon-button (click)="toggleNode(node)">
        <mat-icon *ngIf="node.expandable">{{node.expandable ? 'expand_more' : 'chevron_right'}}</mat-icon>
      </button>
      {{node.name}}
    </li>
  </mat-tree-node>
</mat-tree>

এখানে:

• mat-tree-node: এটি প্রতিটি গাছের নোড (node) নির্দেশ করে।
• mat-icon: আইকন যোগ করার জন্য ব্যবহৃত হয় (যেমন, এক্সপ্যান্ড বা কলাপ্স আইকন)।
• matTreeNodeToggle: এটি নোড এক্সপ্যান্ড/কলাপ্স করার জন্য ব্যবহৃত হয়।

৩. টাইপস্ক্রিপ্ট ফাইলে ট্রি কনফিগারেশন

এখন, TreeControl এবং DataSource কনফিগার করা প্রয়োজন।

import { Component, OnInit } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';

// নোডের ধরণ
export interface TreeNode {
  name: string;
  children?: TreeNode[];
}

// ফ্ল্যাট নোডের ধরণ
export interface FlatTreeNode {
  expandable: boolean;
  name: string;
  level: number;
}

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.css']
})
export class TreeComponent implements OnInit {
  treeControl: FlatTreeControl<FlatTreeNode>;
  dataSource: MatTreeFlatDataSource<TreeNode, FlatTreeNode>;

  constructor() {
    const treeFlattener = new MatTreeFlattener(
      this.transformer, 
      this.getLevel, 
      this.isExpandable, 
      this.getChildren
    );

    this.treeControl = new FlatTreeControl<FlatTreeNode>(this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, treeFlattener);
  }

  ngOnInit() {
    const TREE_DATA: TreeNode[] = [
      {
        name: 'Fruit',
        children: [
          { name: 'Apple' },
          { name: 'Orange' },
          { name: 'Banana' }
        ]
      },
      {
        name: 'Vegetables',
        children: [
          { name: 'Tomato' },
          { name: 'Lettuce' },
          { name: 'Carrot' }
        ]
      }
    ];

    this.dataSource.data = TREE_DATA;
  }

  // নোডে children এক্সেস করা
  private transformer = (node: TreeNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level
    };
  }

  // নোডের স্তর নির্ধারণ করা
  private getLevel = (node: FlatTreeNode) => node.level;

  // নোড এক্সপ্যান্ডেবল কিনা তা চেক করা
  private isExpandable = (node: FlatTreeNode) => node.expandable;

  // নোডের children পাওয়ার জন্য
  private getChildren = (node: TreeNode): TreeNode[] => node.children;
  
  hasChild = (_: number, node: FlatTreeNode) => node.expandable;
}

এখানে:

• MatTreeFlattener: এটি ট্রী ডেটাকে ফ্ল্যাট ফর্ম্যাটে রূপান্তরিত করে, যা পরবর্তীতে ট্রী কন্ট্রোল এবং ডেটা সোর্সের মাধ্যমে প্রদর্শিত হয়।
• FlatTreeControl: এটি ট্রী নোডকে এক্সপ্যান্ড/কলাপ্স কন্ট্রোল করে।
• MatTreeFlatDataSource: এটি ডেটাকে FlatTreeControl এর সঙ্গে যুক্ত করে এবং টেবিলের ডেটা সোর্স তৈরি করে।

ড্র্যাগ-এন্ড-ড্রপ ফিচার ব্যবহার করা

MatTree কম্পোনেন্টে Angular CDK এর ড্র্যাগ-এন্ড-ড্রপ ফিচার ব্যবহারের মাধ্যমে আপনি ট্রী নোডগুলোকে ড্র্যাগ এবং ড্রপ করতে পারবেন। এটি DragDropModule ইমপোর্ট এবং কনফিগারেশনের মাধ্যমে করা যায়।

import { DragDropModule } from '@angular/cdk/drag-drop';

এটি আপনার app.module.ts ফাইলে ইমপোর্ট করুন এবং ট্রী নোডে ড্র্যাগ-এন্ড-ড্রপ কার্যকারিতা যোগ করুন।

Angular Material Tree কম্পোনেন্ট একটি শক্তিশালী এবং কাস্টমাইজযোগ্য উপাদান যা গাছের মতো হায়ারার্কিক্যাল ডেটা প্রদর্শন করতে ব্যবহৃত হয়। এটি ডেটা এক্সপ্যান্ডিং, ড্র্যাগ-এন্ড-ড্রপ, কাস্টম আইকন এবং অন্যান্য ফিচার সমর্থন করে, যা আপনার অ্যাপ্লিকেশনকে আরো ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করে তোলে। MatTree এর মাধ্যমে আপনি হায়ারার্কিক্যাল ডেটা সহজে ম্যানেজ এবং প্রদর্শন করতে পারেন।